<div class="github-component height-full text-left border border-gray-light bg-white rounded-1 p-3 relative">
  <div class="d-flex flex-justify-between flex-items-start mb-1">
    <h1 class="f4 lh-condensed mb-1">
      <a href="{{ repository.html_url }}" target="_blank">
        {%- octicon repo height:20 class:"mr-1 v-align-middle" fill:"#586069" aria-label:repo -%}
        <span class="text-normal">{{ repository.owner.login }} /</span>
        {{ repository.name }}
      </a>
    </h1>
  </div>
  <div class="text-gray mb-4 ws-normal">{{ repository.description }}</div>
  <div class="d-flex f6 mt-2 text-gray absolute bottom">
    {% if repository.language %}
      <span class="repo-language-color ml-0 mr-1" style="background-color:{{ site.data.language-colors[repository.language]["color"] }}"></span>
      <span class="mr-4" itemprop="programmingLanguage">{{ repository.language }}</span>
    {% endif %}
    {%- if repository.stargazers_count -%}
      <a href="{{ repository.html_url }}/stargazers" target="_blank" class="d-inline-block link-gray mr-4">
        {%- octicon star height:16 class:"mr-1" fill:"#586069" aria-hidden:true -%}
        {{ repository.stargazers_count }}
      </a>
    {%- endif -%}
    {%- if repository.forks_count -%}
      <a href="{{ repository.html_url }}/network/members" target="_blank" class="d-inline-block link-gray mr-4">
        {%- octicon git-branch height:16 class:"mr-1" fill:"#586069" aria-hidden:true -%}
        {{ repository.forks_count }}
      </a>
    {%- endif -%}
  </div>
</div>